<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="include :: header('修改公共片库')" />
    <th:block th:include="include :: select2-css" />

    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>

<body>
<div class="main-content">

    <form class="form-horizontal m" id="form-shipin-edit" th:object="${shipin}">
        <input name="id" th:field="*{id}" type="hidden">
        <input id="treeId" name="categoryId" th:field="*{categoryId}" type="hidden" />
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>视频名称：</label>
                    <div class="col-sm-8">
                        <input class="form-control" th:field="*{name}" maxlength="30" name="name"
                               placeholder="请视频名称" required type="text">
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>归属视频分类：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input class="form-control" id="treeName" name="categoryName" onclick="selectDeptTree()"
                                   th:field="*{category.categoryName}" placeholder="请选择视频分类" required type="text">
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <input name="logo" type="hidden" id="logo" value="" th:field="*{logo}">
            <!--     图片地址-->
            <input name="shiFileName" type="hidden" id="shiFileName" value="">

            <!--     视频播放时长-->
            <input name="duration" type="hidden" id="duration" th:field="*{duration}" />

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>打赏：</label>
                    <div class="col-sm-3">
                        <input class="form-control" name="startMoney" th:field="*{startMoney}" placeholder="2"
                               required type="text">
                    </div>
                    <label class="col-sm-1 control-label"><span style="color: red; ">元</span></label>
                    <div class="col-sm-3">
                        <input class="form-control" name="endMoney" th:field="*{endMoney}" placeholder="5" required
                               type="text">
                    </div>
                    <label class="col-sm-1 control-label"><span style="color: red; ">到</span></label>

                </div>
            </div>


        </div>
        <h4 class="form-header h4">其他信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox-content">
                    <div class="form-group">
                        <label class="font-noraml">上传图片</label>
                        <div class="file-loading">
                            <input id="fileinput-demo-1" multiple type="file">
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="font-noraml">上传图片</label>
                        <input class="form-control" name="url" type="text" id="url" value="" th:field="*{url}">

                    </div>

                    <div class="form-group">
                        <label class="font-noraml">上传视频</label>
                        <div class="file-loading">
                            <input id="fileinput-demo-2" multiple type="file">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-noraml">视频地址</label>
                        <input class="form-control" name="videoUrl" type="text" id="videoUrl" value=""
                               th:field="*{videoUrl}">

                    </div>
                </div>
            </div>
        </div>


    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button class="btn btn-sm btn-primary" onclick="submitHandler()" type="button"><i class="fa fa-check"></i>保
            存
        </button>&nbsp;
        <button class="btn btn-sm btn-danger" onclick="closeItem()" type="button"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<script>
        var prefix = ctx + "system/shipin";
        $(document).ready(function () {
            var url = $('#url').val();
            $("#fileinput-demo-1").fileinput({
                'theme': 'explorer-fas',
                'uploadUrl': ctx + "common/uploadFileName",
                allowedFileExtensions: ['jpg', 'jpeg', 'gif', 'png'],//接收的文件后缀
                overwriteInitial: false,
                initialPreviewAsData: true,
                initialPreview: [
                    url
                ]
            });
            $("#fileinput-demo-1").on("fileuploaded", function (event, data, previewId, index) {
                if (data && data.response) {
                    let response = data.response;
                    if (response.code === 500) {
                        $.modal.msg(response.msg);
                    } else if (response.code === 0) {
                        $('#logo').val(response.fileName);
                        $('#url').val(response.url);
                    }
                }
            });

        });


        $(document).ready(function () {
            var videoUrl = $('#videoUrl').val();
            $("#fileinput-demo-2").fileinput({
                'theme': 'explorer-fas',
                'uploadUrl': ctx + "common/uploadFileName",
                overwriteInitial: false,
                initialPreviewAsData: true,
                allowedFileExtensions: ['avi', 'mp4'],//接收的文件后缀
                initialPreview: [
                    videoUrl
                ]
            });
        });
        //这是视频
        $("#fileinput-demo-2").on("fileuploaded", function (event, data, previewId, index) {
            if (data && data.response) {
                let response = data.response;
                if (response.code === 500) {
                    $.modal.msg(response.msg);
                } else if (response.code === 0) {
                    $('#shiFileName').val(response.fileName);
                    $('#videoUrl').val(response.url);
                    $('#duration').val(response.duration);
                }
            }
        });
        $("#form-shipin-edit").validate({
            onkeyup: false,
            rules: {},
            messages: {},
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                let url = $('#url').val();
                let videoUrl = $('#videoUrl').val();
                if (url == null || url === '') {
                    $.modal.msg('请先上传视频logo图片');
                    return;
                }
                if (videoUrl == null || videoUrl === '') {
                    $.modal.msg('请先上传视频');
                    return;
                }
                var data = $("#form-shipin-edit").serializeArray();
                $.operate.saveTab(prefix + "/edit", data);
            }
        }

        /*用户管理-新增-选择部门树*/
        function selectDeptTree() {
            var treeId = $("#treeId").val();
            var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
            var url = ctx + "system/category/selectDeptTree/" + deptId;
            var options = {
                title: '选择栏目',
                width: "380",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero) {
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            if ($.tree.notAllowParents(tree)) {
                var body = layer.getChildFrame('body', index);
                $("#treeId").val(body.find('#treeId').val());
                $("#treeName").val(body.find('#treeName').val());
                layer.close(index);
            }
        }















    </script>
</body>

</html>